<template>
	<div class="page">
		<Head />
		<div class="page-wrap">
			<div class="container">
				<div class="page-ad">
					<a href=""><img src="../assets/images/ad.png" alt=""></a>
				</div>
				<div class="product-cells">
					<el-row :gutter="40">
						<el-col :span="11">
							<div class="bs-swiper">
								<div class="inner">
									<div class="thumb-example">
										<!-- swiper1 -->
										<div class="gallery-cell">
											<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
												<swiper-slide><img src="../assets/images/inslide.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new3.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new2.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new1.png" alt=""></swiper-slide>
											</swiper>
											<div class="magnify-icon"></div>
										</div>
										<!-- swiper2 Thumbs -->
										<div class="thumbs-cell">
											<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
												<swiper-slide><img src="../assets/images/inslide.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new3.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new2.png" alt=""></swiper-slide>
												<swiper-slide><img src="../assets/images/new1.png" alt=""></swiper-slide>
											</swiper>
											<div class="swiper-button-next" slot="button-next"><i class="iconfont icon-rts"></i></div>
											<div class="swiper-button-prev" slot="button-prev"><i class="iconfont icon-lts"></i></div>
										</div>
									</div>
									<div class="te-tag"></div>
								</div>
							</div>
						</el-col>
						<el-col :span="13">
							<div class="bs-preview">
								<div class="preview-heading">
									<div class="view-tip">英国本土品牌，纯手工打造！</div>
									<div class="view-title">法式马卡龙甜点心饼干24枚</div>
								</div>
								<div class="preview-price">
									<div class="view-price-box">
										<span>¥</span>35.60
									</div>
									<div class="sm-text">含税</div>
									<div class="del-price">¥40.00含税</div>
									<div class="less-price">－¥4.40</div>
								</div>
								<div class="preview-attrs">
									<div class="attr-row">
										<div class="attr-hd">赏味期：</div>
										<div class="attr-bd">2020-10-24</div>
									</div>
									<div class="attr-row">
										<div class="attr-hd">数量：</div>
										<div class="attr-bd">
											<el-select size="small" v-model="selectValue" placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<el-input-number v-model="num" @change="handleChange" :min="1" :max="99" size="small"></el-input-number>
										</div>
									</div>
								</div>
								<div class="preview-button">
									<el-button type="danger" plain>加入购物车</el-button>
								</div>
								<div class="item-rows">
									<div class="item-row">
										购买此产品，您可以获得 <span class="text-red">3</span> 积分. 您的购物车有总共 <span class="text-red">3</span> 会员积分 能换成优惠折扣，价值
										<span class="text-red">£ 0.03.</span>
									</div>
									<div class="item-row">
										<div class="item-share">
											<router-link to="" class="iconfont icon-QQ"></router-link>
											<router-link to="" class="iconfont icon-IN"></router-link>
											<router-link to="" class="iconfont icon-weibo"></router-link>
											<router-link to="" class="iconfont icon-weixin1"></router-link>
											<router-link to="" class="iconfont icon-tieba"></router-link>
											<router-link to="" class="iconfont icon-jia"></router-link>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<!-- 产品介绍 -->
				<div class="in-section">
					<div class="sec-head" style="margin-bottom: 0;">
						<div class="sec-tt">产品介绍</div>
						<div class="sec-down"></div>
					</div>
					<div class="pro-intro">
						<el-row :gutter="50">
							<el-col :span="13">
								<div class="intro-grid">
									<div class="title">法式马卡龙甜点心饼干</div>
									<div class="body">
										<p>每次看电影的时候，总喜欢抱上那么一大桶爆米花，边看边吃，太开心了！但一般来说，爆米花只有咸甜两味，电影院里比较经典的两款就是甜or咸，这些都是散装的，放在一个小玻璃柜里到时店员现装盒。或许电影院也发现了只是两种口味未免有些单一，所以一些高端影院也能看到袋装爆米花，其中有一个叫“Joe
											& Seph’s”牌子的爆米花，味道更是千奇百怪！简直颠覆爆米花的形象！</p>
										<p>Joe & Seph’s是一个英国的本土品牌，而且是家族生意，每一包依然坚持自家手工制作，而且众多口味都被评为了Good Taste。</p>
									</div>
									<div class="intro-tags">
										<el-tag type="danger">32g/80g</el-tag>
										<el-tag type="danger">常温保存</el-tag>
									</div>
								</div>
							</el-col>
							<el-col :span="11">
								<div class="intro-photo">
									<img src="../assets/images/jieshao.png" alt="">
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
				<!-- 产品信息 -->
				<div class="in-section">
					<div class="sec-head">
						<div class="sec-tt">产品信息</div>
						<div class="sec-down"></div>
					</div>
					<el-row :gutter="20">
						<el-col :span="24">
							<div class="pro-current">品牌： <span class="text-red">豆乐奇（Douleqi）</span></div>
						</el-col>
						<el-col :span="6">
							<div class="item-cell">
								<div class="item-txt">商品产地</div>
								<div class="item-val">中国大陆</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="item-cell">
								<div class="item-txt">内容量</div>
								<div class="item-val">1.0kg／盒</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="item-cell">
								<div class="item-txt">原料名称</div>
								<div class="item-val">SNACKSBOX零食盒子</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="item-cell">
								<div class="item-txt">保存方式</div>
								<div class="item-val">保存方式保存方式</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="item-cell">
								<div class="item-txt">产品编号</div>
								<div class="item-val">126400516578910</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<!-- 同一类别的其他产品 -->
				<div class="in-section">
					<div class="sec-head">
						<div class="sec-tt">同一类别的其他产品</div>
						<a href="" class="sec-more">查看更多 <i class="iconfont icon-rts"></i></a>
					</div>
					<div class="rel-cells">
						<swiper class="swiper" :options="swiperOption">
							<swiper-slide v-for="(item,index) in newList" :key="index">
								<div class="new-box" :class="'new-box-'+(index+1)">
									<div class="less-price">－¥3.30</div>
									<div class="new-pic" @click="goTo('/Detail')"><img :src="item.pic" alt="">
									</div>
									<div class="new-title">{{item.title}}</div>
									<div class="new-price"><span>¥</span>{{item.price}}</div>
									<div class="cart-icon"></div>
								</div>
							</swiper-slide>
						</swiper>
						<div class="swiper-button-next" slot="button-next"></div>
						<div class="swiper-button-prev" slot="button-prev"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 电子简报 -->
		<div class="jb-section">
			<div class="container">
				<div class="jb-head">
					<img src="../assets/images/txt.png" alt="">
					<p>注册接收最新的新闻和更新直接到你的收件箱</p>
				</div>
				<div class="jb-search">
					<el-input v-model="searchinput" placeholder="请输入内容"></el-input>
					<el-button type="danger">提交</el-button>
				</div>
			</div>
		</div>
		<Foot />
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from '@/components/Foot.vue'
	export default {
		name: 'Home',
		components: {
			Head,
			Foot
		},
		data() {
			return {
				swiperOptionTop: {
					loop: true,
					loopedSlides: 5, // looped slides should be the same
					spaceBetween: 10,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				},
				swiperOptionThumbs: {
					loop: true,
					loopedSlides: 5, // looped slides should be the same
					spaceBetween: 10,
					slidesPerView: '4',
					touchRatio: 0.2,
					slideToClickedSlide: true,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				},
				searchinput: '',
				swiperOption: {
					slidesPerView: 4,
					spaceBetween: 30,
					slidesPerGroup: 4,
					loop: true,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				},
				options: [{
					value: '选项1',
					label: '32克'
				}, {
					value: '选项2',
					label: '32克'
				}, {
					value: '选项3',
					label: '32克'
				}, ],
				num: 1,
				selectValue: '32克',
				latests: [{
					title: '零食盒子暑期大促三重优惠来袭',
					pic: require('../assets/images/rizhi1.png')
				}, {
					title: '2019年零食盒子圣诞放假公告',
					pic: require('../assets/images/rizhi2.png')
				}, {
					title: 'UKSNACKSBOX祝广大顾客新春快乐',
					pic: require('../assets/images/rizhi3.png')
				}],
				newList: [{
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new1.png"),
					price: '47.99'
				}, {
					title: "法式马卡龙甜点心饼干24枚",
					pic: require("../assets/images/new2.png"),
					price: '36.99'
				}, {
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new3.png"),
					price: '47.99'
				}, {
					title: "法式马卡龙甜点心饼干24枚",
					pic: require("../assets/images/new4.png"),
					price: '36.99'
				}, {
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new1.png"),
					price: '47.99'
				}, {
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new1.png"),
					price: '47.99'
				}, {
					title: "法式马卡龙甜点心饼干24枚",
					pic: require("../assets/images/new2.png"),
					price: '36.99'
				}, {
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new3.png"),
					price: '47.99'
				}, {
					title: "法式马卡龙甜点心饼干24枚",
					pic: require("../assets/images/new4.png"),
					price: '36.99'
				}, {
					title: "微醺联名雪融绒芝士蛋糕",
					pic: require("../assets/images/new1.png"),
					price: '47.99'
				}, ],
			};
		},
		mounted() {
			this.$nextTick(() => {
				const swiperTop = this.$refs.swiperTop.swiper
				const swiperThumbs = this.$refs.swiperThumbs.swiper
				swiperTop.controller.control = swiperThumbs
				swiperThumbs.controller.control = swiperTop
			})
		},
		methods: {
			handleChange(value) {
				console.log(value);
			},
			prev() {
				this.swiper.slidePrev();
			},
			next() {
				this.swiper.slideNext();
			},
		}
	}
</script>
